<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mask</title>
</head>
<style>
    @property --m-0 {
        syntax: "<number>";
        initial-value: 1;
        inherits: false;
    }
    @property --m-1 {
        syntax: "<number>";
        initial-value: 1;
        inherits: false;
    }
    @property --m-2 {
        syntax: "<number>";
        initial-value: 1;
        inherits: false;
    }
    @property --m-3 {
        syntax: "<number>";
        initial-value: 1;
        inherits: false;
    }
    @property --m-4 {
        syntax: "<number>";
        initial-value: 1;
        inherits: false;
    }
    @property --m-5 {
        syntax: "<number>";
        initial-value: 1;
        inherits: false;
    }
    @property --m-6 {
        syntax: "<number>";
        initial-value: 1;
        inherits: false;
    }
    @property --m-7 {
        syntax: "<number>";
        initial-value: 1;
        inherits: false;
    }
    @property --m-8 {
        syntax: "<number>";
        initial-value: 1;
        inherits: false;
    }
    @property --m-9 {
        syntax: "<number>";
        initial-value: 1;
        inherits: false;
    }
    @property --m-10 {
        syntax: "<number>";
        initial-value: 1;
        inherits: false;
    }
    @property --m-11 {
        syntax: "<number>";
        initial-value: 1;
        inherits: false;
    }
    @property --m-12 {
        syntax: "<number>";
        initial-value: 1;
        inherits: false;
    }
    @property --m-13 {
        syntax: "<number>";
        initial-value: 1;
        inherits: false;
    }
    @property --m-14 {
        syntax: "<number>";
        initial-value: 1;
        inherits: false;
    }
    @property --m-15 {
        syntax: "<number>";
        initial-value: 1;
        inherits: false;
    }


    div {
        width: 800px;
        height: 600px;
        background: url(../public/img/1.jpg);
        background-size: cover;
        -webkit-mask:radial-gradient(rgba(0, 0, 0, var(--m-0)), rgba(0, 0, 0, var(--m-0))),
        radial-gradient(rgba(0, 0, 0, var(--m-1)), rgba(0, 0, 0, var(--m-1))),
        radial-gradient(rgba(0, 0, 0, var(--m-2)), rgba(0, 0, 0, var(--m-2))),
        radial-gradient(rgba(0, 0, 0, var(--m-3)), rgba(0, 0, 0, var(--m-3))),
        radial-gradient(rgba(0, 0, 0, var(--m-4)), rgba(0, 0, 0, var(--m-4))),
        radial-gradient(rgba(0, 0, 0, var(--m-5)), rgba(0, 0, 0, var(--m-5))),
        radial-gradient(rgba(0, 0, 0, var(--m-6)), rgba(0, 0, 0, var(--m-6))),
        radial-gradient(rgba(0, 0, 0, var(--m-7)), rgba(0, 0, 0, var(--m-7))),
        radial-gradient(rgba(0, 0, 0, var(--m-8)), rgba(0, 0, 0, var(--m-8))),
        radial-gradient(rgba(0, 0, 0, var(--m-9)), rgba(0, 0, 0, var(--m-9))),
        radial-gradient(rgba(0, 0, 0, var(--m-10)), rgba(0, 0, 0, var(--m-10))),
        radial-gradient(rgba(0, 0, 0, var(--m-11)), rgba(0, 0, 0, var(--m-11))),
        radial-gradient(rgba(0, 0, 0, var(--m-12)), rgba(0, 0, 0, var(--m-12))),
        radial-gradient(rgba(0, 0, 0, var(--m-13)), rgba(0, 0, 0, var(--m-13))),
        radial-gradient(rgba(0, 0, 0, var(--m-14)), rgba(0, 0, 0, var(--m-14))),
        radial-gradient(rgba(0, 0, 0, var(--m-15)), rgba(0, 0, 0, var(--m-15)));
        -webkit-mask-size: 25% 25%;
        -webkit-mask-position:    0 0, 200px 0, 150px 0, 300px 0,
        0 200px, 200px 200px, 150px 200px, 300px 200px,
        0 150px, 200px 150px, 150px 150px, 300px 150px,
        0 300px, 200px 300px, 150px 300px, 300px 300px;
        -webkit-mask-repeat: no-repeat;
        transition:
                --m-0 0.2s,
                --m-1 0.15s 0.1s,
                --m-2 0.25s 0.21s,
                --m-3 0.19s 0.15s,
                --m-4 0.24s 0.35s,
                --m-5 0.35s 0.31s,
                --m-6 0.29s 0.27s,
                --m-7 0.29s 0.35s,
                --m-8 0.34s 0.14s,
                --m-9 0.18s 0.24s,
                --m-10 0.22s 0.29s,
                --m-11 0.14s 0.25s,
                --m-12 0.23s 0.13s,
                --m-13 0.18s 0.17s,
                --m-14 0.2s 0.14s,
                --m-15 0.17s 0.3s;
    }
    div:hover {
        --m-0: 0;
        --m-1: 0;
        --m-2: 0;
        --m-3: 0;
        --m-4: 0;
        --m-5: 0;
        --m-6: 0;
        --m-7: 0;
        --m-8: 0;
        --m-9: 0;
        --m-10: 0;
        --m-11: 0;
        --m-12: 0;
        --m-13: 0;
        --m-14: 0;
        --m-15: 0;
    }

</style>
<body>
<div class="img"></div>
</body>
</html>